<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        .drag-view{
            width: 200px; height: 200px; border: 1px solid red;
        } 
        .drag-view[dragging]{
            box-shadow: 5px 5px 15px rgba(0, 0, 0, .2);
        }
        .drop-view{
            width: 400px; height: 400px; border: 1px solid green;
        }
        .drop-view[over]{
            border-color: yellow;
        }
    </style>
    <div class="drag-view J_DragElem" draggable="true">
        draggable属性可用于任何元素节点，但是图片（<img>）和链接（<a>）不加这个属性，
        就可以拖拉。
        对于它们，用到这个属性的时候，往往是将其设为false，防止拖拉这两种元素。
        draggable属性设为true，就无法再用鼠标选中该节点内部的文字或子节点了
    </div> 
    <div class="drop-view J_DropElem" allowdrop></div>
</body>
</html>
<!-- <script src="./node_modules/draggable-polyfill/lib/draggable-polyfill.js"></script> -->
<script type="text/javascript">
const DragElem = document.querySelector('.J_DragElem');
const DropElem = document.querySelector('.J_DropElem');

// 拖拽时，持续触发
// DragElem.addEventListener('drag', drag, false);
// 开始拖拉，触发一次
DragElem.addEventListener('dragstart', dragstart, false);
// 拖拉结束（或取消），触发一次
// DragElem.addEventListener('dragend', dragend, false);

// 拖拉进入当前节点时，在当前节点上触发一次，该事件的target属性是当前节点。通常应该在这个事件的监听函数中，指定是否允许在当前节点放下（drop）拖拉的数据。如果当前节点没有该事件的监听函数，或者监听函数不执行任何操作，就意味着不允许在当前节点放下数据。在视觉上显示拖拉进入当前节点，也是在这个事件的监听函数中设置。
DropElem.addEventListener('dragenter', dragenter, false);
// 在当前区域上移动时，持续触发
DropElem.addEventListener('dragover', dragover, false);
// 拖拉操作离开当前节点范围时，在当前节点上触发，该事件的target属性是当前节点。如果要在视觉上显示拖拉离开操作当前节点，就在这个事件的监听函数中设置。
// DropElem.addEventListener('dragleave', dragleave, false);
// 放置元素至目标
DropElem.addEventListener('drop', drop, false);

function drag (e) { 
    console.log('drag', e.dataTransfer);
}
function dragstart (e) { 
    // e.dataTransfer.dropEffect = 'move';
    var img = document.createElement('img');
    img.src = './drag-element.jpeg';
    img.width = '100';
    img.height = '100';
    // img.style.cssText = 'width: 100px; height: 100px';
    e.dataTransfer.setDragImage(img, 0, 0);
    // document.body.appendChild(img);
    console.log('dragstart', e.dataTransfer); 
}
function dragend (e) { 
    console.log('dragend', e.dataTransfer);
}

function dragenter (e) { 
    
    console.log('dragenter', e.dataTransfer); 
}
function dragover (e) { 
    e.preventDefault();  
    e.dataTransfer.dropEffect = 'move'; 
}
function dragleave (e) { 
    console.log('dragleave', e.dataTransfer);
}
function drop (e) { 
    console.log('drop', e.dataTransfer);
}
</script>